<template>
  <section>
    <div class="model retrieval">
      <img :src="IMGBASE64.GREENXINZENG2X" class="orange">
      <span class="title">新建考试</span>
      <div class="body">
        <header>
          <span>基本信息</span>
        </header>
        <div class="name">
          <span>考试名称:</span>
          <input type="text"><br>
        </div>
        <div class="time">
          <span>考试时间:</span>
          <input type="text">
          <span>登分截止时间:</span>
          <input type="text">
        </div>
        <div class="gongkai">
          <span>是否公开分数:</span>
          <select>
            <option></option>
          </select>
        </div>
      </div>

      <div class="body">
        <header>
          <span>考试科目</span>
        </header>
        <div class="left">
          <span>考试科目</span>
        </div>
        <div class="right">
          <span>满分值</span>
        </div>
        <div class="left" style="padding-top: 0">
          <el-select v-model="manfenzhi" size="small">
            <el-option v-for="item in fenshu" :label="item.label" :value="item.label"></el-option>
          </el-select>
          <el-select v-model="manfenzhi" size="small">
            <el-option v-for="item in fenshu" :label="item.label" :value="item.label"></el-option>
          </el-select>
          <el-select v-model="manfenzhi" size="small">
            <el-option v-for="item in fenshu" :label="item.label" :value="item.label"></el-option>
          </el-select>
        </div>
        <div class="right" style="padding-top: 0">
          <el-select v-model="manfenzhi" size="small">
            <el-option v-for="item in fenshu" :label="item.label" :value="item.label"></el-option>
          </el-select>
          <el-select v-model="manfenzhi" size="small">
            <el-option v-for="item in fenshu" :label="item.label" :value="item.label"></el-option>
          </el-select>
          <el-select v-model="manfenzhi" size="small">
            <el-option v-for="item in fenshu" :label="item.label" :value="item.label"></el-option>
          </el-select>
        </div>
        <div class="clear"></div>
      </div>

      <div class="body">
        <header>
          <span>考试年级</span>
        </header>
        <div class="left">
          考试年级
        </div>
        <div class="right">
          登分年级
        </div>
        <div class="left" style="padding-top: 0">
          <el-select v-model="manfenzhi" size="small">
            <el-option v-for="item in fenshu" :label="item.label" :value="item.label"></el-option>
          </el-select>
          <el-select v-model="manfenzhi" size="small">
            <el-option v-for="item in fenshu" :label="item.label" :value="item.label"></el-option>
          </el-select>
          <el-select v-model="manfenzhi" size="small">
            <el-option v-for="item in fenshu" :label="item.label" :value="item.label"></el-option>
          </el-select>
          <el-select v-model="manfenzhi" size="small">
            <el-option v-for="item in fenshu" :label="item.label" :value="item.label"></el-option>
          </el-select>
          <el-select v-model="manfenzhi" size="small">
            <el-option v-for="item in fenshu" :label="item.label" :value="item.label"></el-option>
          </el-select>
          <el-select v-model="manfenzhi" size="small">
            <el-option v-for="item in fenshu" :label="item.label" :value="item.label"></el-option>
          </el-select>
        </div>
        <div class="right" style="padding-top: 0">
          <el-select v-model="manfenzhi" size="small">
            <el-option v-for="item in fenshu" :label="item.label" :value="item.label"></el-option>
          </el-select>
          <el-select v-model="manfenzhi" size="small">
            <el-option v-for="item in fenshu" :label="item.label" :value="item.label"></el-option>
          </el-select>
          <el-select v-model="manfenzhi" size="small">
            <el-option v-for="item in fenshu" :label="item.label" :value="item.label"></el-option>
          </el-select>
          <el-select v-model="manfenzhi" size="small">
            <el-option v-for="item in fenshu" :label="item.label" :value="item.label"></el-option>
          </el-select>
          <el-select v-model="manfenzhi" size="small">
            <el-option v-for="item in fenshu" :label="item.label" :value="item.label"></el-option>
          </el-select>
          <el-select v-model="manfenzhi" size="small">
            <el-option v-for="item in fenshu" :label="item.label" :value="item.label"></el-option>
          </el-select>
        </div>
        <div class="clear"></div>
      </div>
      <div class="bottom">
        <button class="btn btn-danger">保存</button>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  data () {
    return {
      haha: 'haha',
      manfenzhi: null,
      fenshu: [{
        label: 150
      },
      {
        label: 120
      },
      {
        label: 100
      }]
    }
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
@import '/static/css/material-dashboard.css';
.retrieval{
	.body{
    header{
      height: 24px;
      border-bottom: 2px solid #D7D7D7;
      padding-bottom: 10px;
      span{
        display: inline-block;
        height: 24px;
        border-bottom: 2px solid #FB7862;
        color: #FB7862;
        padding: 0 10px 10px 10px;
      }
    }
    input{
      border: 0;
      border-bottom: 1px solid #D7D7D7;
    }
    div{
      padding: 25px 10px 10px 10px;
    }
    .time{
      span{
        margin-left: 20%;
      }
      span:first-child{
        margin-left: 0;
      }
    }
    .gongkai{
      select{
        width: 14%;
      }
    }
    .left{
      width: 40%;
      float: left;
      padding-left: 10%;
      select{
        width: 50%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
        margin-bottom: 25px;
      }
    }
    .right{
      width: 40%;
      float: right;
      select{
        width: 50%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
        margin-bottom: 25px;
      }
    }
  }
  .bottom{
    text-align: center;
    padding-bottom: 10px;
  }
}
.clear{
  clear: both;
}
</style>
